<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
// const current = ref(0)
const title = ref()
const content = ref()
const pagination = ref()
const currentPage = ref(1)
const pageSize = ref(4)
const msg = ref([])

onMounted(() => {
  handleCurrentChange()
})

const handleCurrentChange = () => {
  axios.get('api/messagecontroller/messages/' + currentPage.value + '/' + pageSize.value).then(res => {
    msg.value = res.data.records

    pagination.value = res.data
    console.log(pagination.value)
  })
}

const submit = () => {
  const date = new Date()

  axios.post('api/messagecontroller/message', {
    title: title.value,
    content: content.value,
    date: date
  }).then(res => {
    // const code = res.data.code
    handleCurrentChange()
  })
  title.value = ''
  content.value = ''
  handleCurrentChange()
}

</script>

<template>
<div id="message">
    <div class="title">给我留言</div>
    <div class="wrapper">
      <div class="title1">
        <el-input
          placeholder="留言标题"
          v-model="title"
          clearable>
        </el-input>
      </div>
      <div class="content">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="留言内容"
          v-model="content"
          clearable>
        </el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="submit()">提交留言</el-button>
      </div>
      <div class="all">
        <ul class="msglist">
          <li class="list"

          v-for="(data,index) in pagination" :key="index"
          >
            <p class="title"> <i class="iconfont icon-untitled33"></i>{{data.title}}</p>
            <p class="content">{{data.content}}</p>
            <p class="date"><i class="iconfont icon-date"></i>{{data.time}}</p>
            <!-- <div v-for="(replayData,index2) in data.replays" :key="index2">
              <p class="comment"><i class="iconfont icon-huifuxiaoxi"></i>{{replayData.replay}}</p>
            </div>
            <span class="replay" @click="replay(data.id)" v-if="flag && index == current">Comment</span> -->
          </li>
        </ul>
      </div>
      <div class="pagination">
       <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1,2,3]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.pagination {
  display: flex;
  justify-content: center;
}
#message {
  width: 980px;
  margin: 0 auto;
}
.title {
  margin: 20px;
}
.content {
  padding: 20px 0px;
}
#message  {
  .btn {
   padding-bottom: 20px;
  }
  .all {
    .date {
      color: rgb(80, 157, 202);
      line-height: 45px;
      font-size: 13px;
    }
    .list {
      background-color: #eee;
      padding:10px;
      border-radius: 4px;
      margin: 10px 0px;
      position: relative;
      transition: all .3s ease;
      .title {
        color: #5f5f5f;
        margin: 0px;
        font-size: 13px;
        line-height: 30px;
      }
      .content {
        padding: 0px;
      }
      .icon-untitled33 {
        font-size: 13px;
        margin-right: 4px;
      }
      .icon-date {
        font-size: 13px;
        margin-right: 4px;
        color: rgb(80, 157, 202);
      }
      .replay {
        position: absolute;
        right: 30px;
        bottom: 15px;
        color: tomato;
        cursor: pointer;
        transition: all .3s ease;
      }
      .comment {
        margin:-7px 0px;
        padding-bottom: 12px;
        font-size: 13px;
        color: #28b2b4;
        i {
          margin-right: 4px;
        }
      }
    }
  }
}
#message .wrapper {
  background-color: #fff;
  padding: 20px;

}
</style>
